<template>
	<view
		v-if="readonly"
		class="px-1-3 py-1-1 rounded-xxxl color-secondary text-center"
		:class="[bg, extraClass]"
		hover-class="opacity-50"
		hover-start-time="0"
		hover-stay-time="0"
		@click="$emit('click')"
	>
		<text class="iconfont icon-sousuo mr-2 text-xxxxl"></text> <text :class="textSize">{{ placeholder }}</text>
	</view>
	<view
		v-else
		class="pl-2-2 py-1 rounded-xxxl flex flex-row flex-center border b-active"
		:class="[hasScan ? '' : 'pr-1-3', bg, extraClass]"
	>
		<input
			confirm-type="search"
			:placeholder="placeholder"
			:placeholder-style="'color: rgba(36,106,73,0.4)'"
			class="flex-1 text-l"
			:class="textSize"
			@confirm="$emit('confirm')"
			v-model="value"
		/>
		<text class="iconfont icon-sousuo ml-1 color-main text-xxxl"></text>
		<view v-if="hasScan" class="h-4 w-min bg-color-2" />
		<view
			v-if="hasScan"
			class="px-1-3"
			@click="handleScan"
			hover-class="opacity-50"
			hover-start-time="0"
			hover-stay-time="10"
		>
			<text class="t-icon t-icon-saoma" />
		</view>
	</view>
</template>

<script>
import { ref, watch } from 'vue';
export default {
	props: {
		readonly: Boolean,
		placeholder: {
			type: String,
			default: '请输入搜索关键词',
		},
		hasScan: Boolean,
		modelValue: String,
		bg: {
			type: String,
			default: 'bg-color-1',
		},
		textSize: {
			type: String,
			default: 'text-l',
		},
		extraClass: String,
	},
	setup(props, ctx) {
		const value = ref('');
		if (!props.readonly) {
			watch(
				() => props.modelValue,
				(v) => {
					value.value = v;
				}
			);
			watch(value, (val) => {
				ctx.emit('update:modelValue', val);
				ctx.emit('change', val);
			});
		}
		function handleScan() {
			uni.scanCode({
				success(res) {
					ctx.emit('scan', res);
				},
				fail(e) {},
			});
		}
		return {
			value,
			handleScan,
		};
	},
};
</script>

<style></style>
